/******************** 变量 ********************/
$lv-tabs-normal-color: $text-color-secondary !default;
$lv-tabs-disabled-color: $text-color-disabled !default;
$lv-tabs-hover-color: $primary-color;
$lv-tabs-active-color: $primary-color;

$lv-tabs-step-border-color: $primary-color !default;
$lv-tabs-step-hover-bg-color: #f7faff;
$lv-tabs-step-text-color: #333333;
$lv-tabs-step-active-bg-color: #ebf3ff;
$lv-tabs-step-disable-bg-color: #e6ebf5;
$lv-tabs-button-bg-color: #eeeeee;
$lv-tabs-button-border-color: #cccccc;
$lv-tabs-border-color: transparent;
$lv-tab-spliter-bg-color: transparent;

$lv-tabs-border-width-md: 0.28rem;
$lv-tabs-border-width-sm: 0.27rem;
$lv-tabs-border-width-xs: 0.02rem;
$lv-tabs-height-xs: 0.12rem;

/******************** mixin ********************/

/******************** 组件 ********************/

.lv-tabs {
  color: $text-color;
  font-size: $font-size-base;
  font-family: $font-family;
  line-height: $line-height-coeff;

  .lv-tabs-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    > .lv-tabs-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;

      > .lv-tabs-container {
        width: 100%;
        overflow: hidden;
      }
    }

    > .lv-tabs-extra {
      flex: 0 0 auto;
    }
  }

  .lv-tabs-body {
    > .lv-tab-content {
      padding: $padding-md 0 0;
      border-radius: 0;
    }

    > .lv-tab-content-no-padding {
      padding: 0;
    }
  }

  .lv-tabs-dropdown {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    align-self: stretch;
    height: auto;
    justify-content: center;
    width: 0.48rem;

    > span {
      display: block;
      height: 100%;
    }

    > lv-popover {
      height: 100%;
    }

    .lv-tabs-icon {
      height: 100%;
      padding: $padding-sm 0;
      cursor: pointer;

      > .lv-icon-host {
        width: 0.24rem;
        height: 0.24rem;
      }

      &:hover,
      &.lv-tabs-icon-visible {
        color: $primary-color;
      }
    }

    &::before {
      position: absolute;
      top: 25%;
      left: 0;
      width: 0.01rem;
      height: 50%;
      background: $tabs-splitline-bg-color;
      content: '';
    }
  }

  .lv-tabs-prev-button,
  .lv-tabs-next-button {
    flex: 0 0 auto;
    padding-right: $padding-sm;

    > span {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 0.2rem;
      height: 0.2rem;
      border: $border-width-base $border-style-base $lv-tabs-button-border-color;
      border-radius: 0.1rem;
      cursor: pointer;

      &:hover {
        i {
          color: $lv-tabs-active-color;
        }
      }
    }

    > span[disabled] {
      background: $lv-tabs-button-bg-color;
      cursor: default;

      &:hover i,
      i {
        color: $lv-tabs-disabled-color;
      }
    }
  }

  .lv-tabs-next-button {
    padding-right: 0;
    padding-left: $padding-sm;
  }

  .lv-tabs-list {
    position: relative;
    display: inline-flex;
    padding: 0;
    white-space: nowrap;

    > div,
    > span {
      display: inline-block;
      vertical-align: middle;
    }

    > .lv-tab-spliter {
      display: flex;
      align-items: center;

      &:after {
        width: 0.01rem;
        height: $lv-tabs-height-xs;
        margin: 0.06rem $margin-md;
        background: $tabs-splitline-bg-color;
        content: '';
      }

      &:last-of-type {
        display: none !important;
      }
    }

    > .lv-tab-item {
      display: flex;
      align-items: center;
      line-height: 0;
      cursor: pointer;

      @include motion-tabs-item;

      &:not([disabled]):hover > span:first-child {
        color: $lv-tabs-hover-color;
      }

      > span {
        display: inline-block;
        color: $lv-tabs-normal-color;
        font-size: $font-size-base;
        line-height: $line-height-base;
        vertical-align: middle;

        &:hover {
          color: $lv-tabs-hover-color;
        }
      }

      > span.lv-tab-close {
        height: $lv-tabs-height-xs;
        margin-left: $margin-sm;
        line-height: 0;
        cursor: pointer;

        i {
          width: 0.12rem;
          height: $lv-tabs-height-xs;
        }
      }

      &.lv-tab-item-active {
        position: relative;
        cursor: default;

        > span:not(.lv-tab-close) {
          color: $lv-tabs-active-color;
        }

        &::after {
          position: absolute;
          right: 0;
          bottom: 0;
          left: 0;
          border-bottom: $border-width-base $border-style-base $lv-tabs-active-color;
          animation: activeBar $motion-duration-md;
          content: '';
        }
      }

      &[disabled] {
        cursor: not-allowed;

        > span {
          color: $lv-tabs-disabled-color;
        }
      }
    }

    > .lv-tab-item-activated {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 0;
      border-bottom: $border-width-base $border-style-base $primary-color;

      @include motion-tabs-indicator;
    }
  }
}

.lv-tabs {
  &.lv-tabs-card {
    .lv-tabs-bar {
      &.lv-tabs-bar-card {
        position: relative;
        background: $tabs-bar-bg-color;
        border-radius: $border-radius-lg $border-radius-lg 0 0;

        &::after {
          position: absolute;
          right: 0;
          bottom: 0;
          left: 0;
          border-bottom: $border-width-base $border-style-base $tabs-button-border-bottom-color;
          content: '';
        }

        .lv-tabs-wrapper {
          position: relative;
          z-index: 1;
        }
      }
    }

    > .lv-tabs-body {
      > .lv-tab-content {
        padding: $padding-lg;
        border-radius: 0 0 $border-radius-l $border-radius-l;
      }

      > .lv-tab-content-no-padding {
        padding: 0;
      }
    }

    .lv-tabs-list {
      &.lv-tabs-list-card {
        padding: 0;

        > .lv-tab-spliter {
          height: $lv-tabs-height-xs;
          margin: 0.1rem 0;
          margin-right: -0.01rem;
          padding: 0;
        }

        > .lv-tab-item {
          height: $height-base;
          padding: $padding-xs $padding-md;

          &:first-of-type {
            border-radius: $border-radius-lg 0 0 0;
          }

          > span {
            padding: 0;
            font-size: $font-size-base;
            line-height: $line-height-lg;

            @include motion-tabs-item;
          }

          > span.lv-tab-close {
            margin-left: $margin-sm;
            padding: 0;
            line-height: 0;
          }

          &.lv-tab-item-active {
            background: $tabs-item-active-bg-color;

            > span {
              font-weight: $font-weight-bold;
            }

            &::after {
              border-bottom: $lv-tabs-border-width-xs $border-style-base $lv-tabs-active-color;
              animation: activeBar 300ms;
            }
          }

          &.lv-tab-item-active + .lv-tab-spliter {
            background: $lv-tab-spliter-bg-color;
          }
        }

        > .lv-tab-item-activated {
          border-width: 0.02rem;
        }
      }
    }
  }

  &.lv-tabs-panel {
    .lv-tabs-bar {
      &.lv-tabs-bar-panel {
        position: relative;
        background: $tabs-bar-bg-color;
        border-radius: $border-radius-lg $border-radius-lg 0 0;
        overflow: hidden;
      }

      &::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        border-bottom: $border-width-base $border-style-base $tabs-button-border-bottom-color;
        content: '';
      }

      .lv-tabs-wrapper {
        position: relative;
        z-index: 1;

        .lv-tabs-dropdown::before {
          top: 0;
          height: 100%;
        }

        .lv-tabs-container {
          position: relative;

          &::before {
            position: absolute;
            display: none;
            content: '';
            top: 0;
            bottom: 0;
            left: 0;
            width: 0.18rem;
            background: linear-gradient(to right, $tabs-panel-shadow-dark, $tabs-panel-shadow-light);
            z-index: 2;
          }
          &::after {
            position: absolute;
            display: none;
            content: '';
            top: 0;
            bottom: 0;
            right: 0;
            width: 0.18rem;
            background: linear-gradient(to left, $tabs-panel-shadow-dark, $tabs-panel-shadow-light);
            z-index: 2;
          }
        }

        .lv-tabs-container-shadow-left::before {
          display: block;
        }
        .lv-tabs-container-shadow-right::after {
          display: block;
        }
      }
    }

    > .lv-tabs-body {
      > .lv-tab-content {
        padding: $padding-lg;
        border-radius: 0 0 $border-radius-l $border-radius-l;
      }

      > .lv-tab-content-no-padding {
        padding: 0;
      }
    }

    .lv-tabs-list {
      &.lv-tabs-list-panel {
        > .lv-tab-item {
          padding: $padding-md;
          justify-content: center;
          flex: 1;
          position: relative;
          overflow: hidden;

          &:not(:first-child, .lv-tab-item-active)::before {
            display: block;
            content: '';
            position: absolute;
            top: 0.06rem;
            bottom: 0.06rem;
            left: 0;
            width: 0.01rem;
            background-color: $tabs-splitline-bg-color;
          }

          > span {
            padding: 0;
            font-size: $font-size-base;
            line-height: $line-height-lg;

            @include motion-tabs-item;
          }

          > span.lv-tab-close {
            margin-left: $margin-sm;
            padding: 0;
            line-height: 1;
          }

          &.lv-tab-item-active {
            background: $tabs-item-active-bg-color;
            border-radius: $border-radius-lg $border-radius-lg 0 0;

            & + .lv-tab-item::before {
              display: none;
            }

            > span {
              font-weight: $font-weight-bold;
            }

            &::after {
              display: none;
            }
          }
        }
        .lv-tab-item-line {
          display: block;
          position: absolute;
          background-color: $primary-color;
          height: 0.03rem;
          top: 0;
          width: 100%;
          @include motion-tabs-indicator;
        }
      }
    }
  }

  &.lv-tabs-step {
    .lv-tabs-bar {
      &.lv-tabs-bar-step {
        position: relative;
        padding: 0;

        &::after {
          position: absolute;
          right: 0;
          bottom: 0;
          left: 0;
          border: none;
          content: '';
        }
      }
    }

    .lv-tabs-list {
      &.lv-tabs-list-step {
        display: flex;
        align-items: stretch;
        justify-content: space-between;

        > .lv-tab-item {
          position: relative;
          display: flex;
          flex: 1 1 auto;
          align-items: center;
          justify-content: center;
          height: $height-xl;
          margin: 0 $margin-md;
          border: $border-width-base $border-style-base $lv-tabs-step-border-color;
          border-right: none;
          border-left: none;

          &::before {
            position: absolute;
            top: -0.01rem;
            left: 0;
            border-color: $lv-tabs-step-border-color $lv-tabs-step-border-color $lv-tabs-step-border-color
              $lv-tabs-border-color;
            border-style: solid;
            border-width: $lv-tabs-border-width-md $lv-tabs-border-width-xs $lv-tabs-border-width-md 0.2rem;
            transform: translateX(-100%);
            content: '';
          }

          &::after {
            position: absolute;
            top: -0.01rem;
            right: 0;
            border-color: $lv-tabs-border-color $lv-tabs-border-color $lv-tabs-border-color $lv-tabs-step-border-color;
            border-style: $border-style-base;
            border-width: $lv-tabs-border-width-md $lv-tabs-border-width-xs $lv-tabs-border-width-md 0.2rem;
            transform: translateX(100%);
            animation: none;
            content: '';
          }

          &:first-of-type {
            margin-left: 0;
            border-left: $border-width-base $border-style-base $lv-tabs-step-border-color;

            &::before {
              border: none;
            }

            > span {
              &::before {
                border: none;
              }
            }
          }

          &:last-of-type {
            margin-right: 0;
            border-right: $border-width-base $border-style-base $lv-tabs-step-border-color;

            &::after {
              border: none;
            }

            > span {
              &::after {
                border: none;
              }
            }
          }

          > span {
            padding: 0;
            color: $lv-tabs-step-text-color;
            font-size: 0.18rem;

            &::before {
              position: absolute;
              top: 0;
              left: 0.01rem;
              z-index: 1;
              border-color: $color-white $color-white $color-white $lv-tabs-border-color;
              border-style: $border-style-base;
              border-width: $lv-tabs-border-width-sm $lv-tabs-border-width-xs $lv-tabs-border-width-sm 0.19rem;
              transform: translateX(-100%);
              content: '';
            }

            &::after {
              position: absolute;
              top: 0;
              right: 0;
              z-index: 1;
              border-color: $lv-tabs-border-color $lv-tabs-border-color $lv-tabs-border-color $color-white;
              border-style: $border-style-base;
              border-width: $lv-tabs-border-width-sm $border-width-base $lv-tabs-border-width-sm 0.19rem;
              transform: translateX(100%);
              content: '';
            }
          }

          &:hover {
            background: $lv-tabs-step-hover-bg-color;

            > span {
              color: $lv-tabs-step-text-color;

              &::after {
                border-color: $lv-tabs-border-color $lv-tabs-border-color $lv-tabs-border-color
                  $lv-tabs-step-hover-bg-color;
              }

              &::before {
                border-color: $lv-tabs-step-hover-bg-color $lv-tabs-step-hover-bg-color $lv-tabs-step-hover-bg-color
                  $lv-tabs-border-color;
              }
            }
          }

          &.lv-tab-item-active {
            background: $lv-tabs-step-active-bg-color;

            > span:not(.lv-tab-close) {
              &::after {
                right: 0.01rem;
                bottom: auto;
                left: auto;
                display: block;
                border-color: $lv-tabs-border-color $lv-tabs-border-color $lv-tabs-border-color
                  $lv-tabs-step-active-bg-color;
                border-bottom: $lv-tabs-border-width-sm $border-style-base $lv-tabs-border-color;
                animation: none;
              }

              &::before {
                border-color: $lv-tabs-step-active-bg-color $lv-tabs-step-active-bg-color $lv-tabs-step-active-bg-color
                  $lv-tabs-border-color;
              }
            }
          }

          &[disabled] {
            background: $lv-tabs-step-disable-bg-color;
            border-color: $lv-tabs-step-disable-bg-color;
            cursor: not-allowed;

            &::after {
              border-color: $lv-tabs-border-color $lv-tabs-border-color $lv-tabs-border-color
                $lv-tabs-step-disable-bg-color;
            }

            &::before {
              border-color: $lv-tabs-step-disable-bg-color $lv-tabs-step-disable-bg-color $lv-tabs-step-disable-bg-color
                $lv-tabs-border-color;
            }

            > span {
              color: $lv-tabs-disabled-color;

              &::after {
                border-color: $lv-tabs-border-color $lv-tabs-border-color $lv-tabs-border-color
                  $lv-tabs-step-disable-bg-color;
              }

              &::before {
                border-color: $lv-tabs-step-disable-bg-color $lv-tabs-step-disable-bg-color
                  $lv-tabs-step-disable-bg-color $lv-tabs-border-color;
              }
            }
          }
        }
      }
    }
  }

  &.lv-tabs-underline {
    .lv-tabs-bar {
      .lv-tabs-wrapper {
        position: relative;
        .lv-tabs-container::before {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: $border-width-base;
          background-color: $tabs-underline-split-color;
          content: '';
        }
      }
    }
    .lv-tab-item {
      padding: 0.04rem 0;
      > span {
        font-size: 0.12rem;
        line-height: 0.18rem;
      }
    }
    .lv-tab-item:not(:last-child) {
      margin-right: 0.16rem;
    }
  }
}

@keyframes activeBar {
  0% {
    transform: scale(0);
  }

  99% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}
